<template>
  <div class="file-storage">
    <Header />
    
    <main class="main-content">
      <div class="container">
        <div class="page-header">
          <h1 class="page-title">📦 文件货柜</h1>
          <p class="page-desc">永久存储您的重要文件</p>
        </div>
        
        <!-- 操作区域 -->
        <div class="action-section">
          <button 
            class="btn btn-primary" 
            @click="openUploadModal"
          >
            📤 上传文件
          </button>
          
          <button 
            class="btn btn-success" 
            @click="showKeyModal = true"
          >
            🔑 管理密钥
          </button>
          
          <button 
            v-if="hasSecretKey"
            class="btn btn-danger" 
            @click="clearKey"
          >
            🗑️ 清除密钥
          </button>
        </div>
        
        <!-- 文件列表 -->
        <div class="file-list-section">
          <div class="list-header">
            <h2>文件列表</h2>
            <button class="btn" @click="loadFileList">
              🔄 刷新
            </button>
          </div>
          
          <div v-if="loading" class="loading-container">
            <div class="loading"></div>
            <p>加载中...</p>
          </div>
          
          <div v-else-if="fileList.length === 0" class="empty-state">
            <div class="empty-icon">📭</div>
            <p>暂无文件</p>
          </div>
          
          <div v-else class="file-table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>文件名</th>
                  <th>类型</th>
                  <th>大小</th>
                  <th>下载次数</th>
                  <th>上传时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="file in fileList" :key="file.id">
                  <td>
                    <div class="file-name">
                      <span class="file-icon">{{ getFileIcon(file.extension) }}</span>
                      <span>{{ file.oriName }}</span>
                    </div>
                  </td>
                  <td>{{ file.extension || '-' }}</td>
                  <td>{{ formatFileSize(file.fileSize) }}</td>
                  <td>{{ file.currentCount || 0 }}</td>
                  <td>{{ formatDateTime(file.uploadTime) }}</td>
                  <td>
                    <div class="action-buttons">
                      <button 
                        class="btn btn-sm btn-primary" 
                        @click="viewDetail(file.id)"
                      >
                        查看
                      </button>
                      <button 
                        v-if="hasSecretKey"
                        class="btn btn-sm btn-danger" 
                        @click="confirmDelete(file)"
                      >
                        删除
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            
            <!-- 分页 -->
            <div class="pagination-wrapper" v-if="total > pageSize">
              <div class="pagination-info">
                <span class="total-info">
                  共 <strong>{{ total }}</strong> 个文件
                </span>
                <span class="range-info">
                  显示 {{ startRecord }}-{{ endRecord }}
                </span>
              </div>
              
              <div class="pagination">
                <!-- 首页 -->
                <button 
                  class="page-btn page-first" 
                  :disabled="pageNum === 1"
                  @click="changePage(1)"
                  title="首页"
                >
                  <span>⟪</span>
                </button>
                
                <!-- 上一页 -->
                <button 
                  class="page-btn page-prev" 
                  :disabled="pageNum === 1"
                  @click="changePage(pageNum - 1)"
                  title="上一页"
                >
                  <span>‹</span>
                </button>
                
                <!-- 页码按钮 -->
                <button
                  v-for="page in displayPages"
                  :key="page"
                  :class="['page-btn', 'page-number', { active: page === pageNum, ellipsis: page === '...' }]"
                  :disabled="page === '...'"
                  @click="page !== '...' && changePage(page)"
                >
                  {{ page }}
                </button>
                
                <!-- 下一页 -->
                <button 
                  class="page-btn page-next" 
                  :disabled="pageNum === totalPages"
                  @click="changePage(pageNum + 1)"
                  title="下一页"
                >
                  <span>›</span>
                </button>
                
                <!-- 末页 -->
                <button 
                  class="page-btn page-last" 
                  :disabled="pageNum === totalPages"
                  @click="changePage(totalPages)"
                  title="末页"
                >
                  <span>⟫</span>
                </button>
              </div>
              
              <!-- 页码跳转 -->
              <div class="page-jumper">
                <span>跳至</span>
                <input 
                  type="number" 
                  class="page-input"
                  v-model.number="jumpPage"
                  @keyup.enter="jumpToPage"
                  :min="1"
                  :max="totalPages"
                  placeholder="页码"
                />
                <span>页</span>
                <button 
                  class="btn btn-sm btn-primary"
                  @click="jumpToPage"
                  :disabled="!jumpPage || jumpPage < 1 || jumpPage > totalPages"
                >
                  跳转
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <!-- 密钥管理模态框 -->
    <Modal 
      v-model:show="showKeyModal" 
      title="密钥管理"
      @confirm="keyAction === 'generate' ? generateKey() : saveInputKey()"
    >
      <!-- 选择操作类型 -->
      <div class="key-tabs">
        <button 
          :class="['tab-btn', { active: keyAction === 'generate' }]"
          @click="keyAction = 'generate'; generatedKey = ''; inputKey = ''"
        >
          🔑 生成密钥
        </button>
        <button 
          :class="['tab-btn', { active: keyAction === 'input' }]"
          @click="keyAction = 'input'; generatedKey = ''; adminPassword = ''"
        >
          ✍️ 输入密钥
        </button>
      </div>
      
      <!-- 生成密钥 -->
      <div v-if="keyAction === 'generate'" class="key-section">
        <div class="form-group">
          <label>超级管理员密码：</label>
          <input 
            type="password" 
            class="input" 
            v-model="adminPassword"
            placeholder="请输入超级管理员密码"
            @keyup.enter="generateKey"
          />
          <p class="help-text">输入管理员密码以生成新密钥</p>
        </div>
        
        <div v-if="generatedKey" class="key-display">
          <div class="message message-success">
            密钥生成成功！请妥善保管。
          </div>
          <div class="key-value">
            {{ generatedKey }}
          </div>
          <button class="btn btn-primary btn-block" @click="copyKey">
            📋 复制密钥
          </button>
        </div>
      </div>
      
      <!-- 输入密钥 -->
      <div v-else class="key-section">
        <div class="form-group">
          <label>密钥：</label>
          <input 
            type="text" 
            class="input" 
            v-model="inputKey"
            placeholder="请输入已有的密钥"
            @keyup.enter="saveInputKey"
          />
          <p class="help-text">如果您已经有密钥，可以直接输入使用</p>
        </div>
      </div>
    </Modal>
    
    <!-- 上传文件模态框 -->
    <Modal 
      v-model:show="showUploadModal" 
      title="上传文件"
      :show-footer="false"
    >
      <div class="upload-form">
        <div class="form-group">
          <label>密钥：</label>
          <input 
            type="text" 
            class="input" 
            v-model="uploadSecretKey"
            placeholder="请输入密钥"
            :disabled="uploading"
          />
          <p class="help-text">输入密钥以上传文件到货柜</p>
        </div>
        
        <div class="form-group">
          <label>选择文件：</label>
          
          <!-- 自定义文件选择区域 -->
          <div 
            :class="['file-upload-area', { 'has-file': selectedFile, 'dragging': isDragging }]"
            @click="triggerFileInput"
            @dragover.prevent="isDragging = true"
            @dragleave.prevent="isDragging = false"
            @drop.prevent="handleDrop"
          >
            <input 
              type="file" 
              ref="fileInput"
              @change="handleFileChange"
              :disabled="uploading"
              style="display: none;"
            />
            
            <div v-if="!selectedFile" class="upload-placeholder">
              <div class="upload-icon">📁</div>
              <p class="upload-text">点击选择文件或拖拽到此处</p>
              <p class="upload-hint">支持任意格式文件</p>
            </div>
            
            <div v-else class="file-selected">
              <div class="file-icon-preview">{{ getFileIcon(selectedFile.name.split('.').pop()) }}</div>
              <div class="file-info">
                <p class="file-name-display">{{ selectedFile.name }}</p>
                <p class="file-size-display">{{ formatFileSize(selectedFile.size) }}</p>
              </div>
              <button 
                class="remove-file-btn" 
                @click.stop="removeFile"
                :disabled="uploading"
              >
                ✕
              </button>
            </div>
          </div>
        </div>
        
        <div class="upload-progress" v-if="uploading">
          <div class="loading"></div>
          <p>上传中...</p>
        </div>
        
        <div class="modal-footer">
          <button class="btn" @click="closeUploadModal">取消</button>
          <button 
            class="btn btn-primary" 
            @click="uploadFile"
            :disabled="!selectedFile || !uploadSecretKey || uploading"
          >
            上传
          </button>
        </div>
      </div>
    </Modal>
    
    <!-- 删除确认模态框 -->
    <Modal 
      v-model:show="showDeleteModal" 
      title="确认删除"
      @confirm="deleteFile"
    >
      <p>确定要删除文件 <strong>{{ fileToDelete?.oriName }}</strong> 吗？</p>
      <p class="text-warning">此操作不可恢复！</p>
    </Modal>
    
    <Footer />
    <Message ref="message" />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Modal from '@/components/Modal.vue'
import Message from '@/components/Message.vue'
import { getFileList, uploadFile, deleteFile } from '@/api/file'
import { generateSecretKey } from '@/api/secretKey'
import { saveSecretKey, getSecretKey, clearSecretKey, hasValidSecretKey } from '@/utils/storage'
import { formatFileSize, getFileIcon, formatDateTime } from '@/utils/format'

export default {
  name: 'FileStorage',
  components: {
    Header,
    Footer,
    Modal,
    Message
  },
  data() {
    return {
      fileList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      
      showKeyModal: false,
      showUploadModal: false,
      showDeleteModal: false,
      
      keyAction: 'input', // 'generate' 或 'input'，默认为输入密钥
      adminPassword: '',
      generatedKey: '',
      inputKey: '',
      
      uploadSecretKey: '', // 上传时使用的密钥
      selectedFile: null,
      uploading: false,
      isDragging: false, // 是否正在拖拽文件
      
      fileToDelete: null,
      jumpPage: null // 跳转页码
    }
  },
  computed: {
    hasSecretKey() {
      return hasValidSecretKey()
    },
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    startRecord() {
      return (this.pageNum - 1) * this.pageSize + 1
    },
    endRecord() {
      return Math.min(this.pageNum * this.pageSize, this.total)
    },
    displayPages() {
      const pages = []
      const total = this.totalPages
      const current = this.pageNum
      
      // 如果总页数小于等于7，显示全部页码
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
        return pages
      }
      
      // 总是显示第一页
      pages.push(1)
      
      // 计算中间显示的页码
      if (current <= 3) {
        // 当前页靠前
        for (let i = 2; i <= 5; i++) {
          pages.push(i)
        }
        pages.push('...')
      } else if (current >= total - 2) {
        // 当前页靠后
        pages.push('...')
        for (let i = total - 4; i <= total - 1; i++) {
          pages.push(i)
        }
      } else {
        // 当前页在中间
        pages.push('...')
        for (let i = current - 1; i <= current + 1; i++) {
          pages.push(i)
        }
        pages.push('...')
      }
      
      // 总是显示最后一页
      pages.push(total)
      
      return pages
    }
  },
  mounted() {
    this.loadFileList()
  },
  methods: {
    formatFileSize,
    getFileIcon,
    formatDateTime,
    
    async loadFileList() {
      this.loading = true
      try {
        const response = await getFileList(this.pageNum, this.pageSize)
        if (response.data.code === '0') {
          this.fileList = response.data.data.data
          this.total = response.data.data.total
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '加载文件列表失败'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '加载文件列表失败：' + error.message
        })
      } finally {
        this.loading = false
      }
    },
    
    changePage(page) {
      this.pageNum = page
      this.loadFileList()
      this.jumpPage = null // 清除跳转输入
      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    jumpToPage() {
      if (!this.jumpPage || this.jumpPage < 1 || this.jumpPage > this.totalPages) {
        this.$refs.message.show({
          type: 'warning',
          message: `请输入有效的页码（1-${this.totalPages}）`
        })
        return
      }
      this.changePage(this.jumpPage)
    },
    
    async generateKey() {
      if (!this.adminPassword) {
        this.$refs.message.show({
          type: 'warning',
          message: '请输入超级管理员密码'
        })
        return
      }
      
      try {
        const response = await generateSecretKey(this.adminPassword)
        if (response.data.code === '0') {
          this.generatedKey = response.data.data
          saveSecretKey(this.generatedKey)
          this.$refs.message.show({
            type: 'success',
            message: '密钥生成成功'
          })
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '密钥生成失败'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '密钥生成失败：' + error.message
        })
      }
    },
    
    copyKey() {
      navigator.clipboard.writeText(this.generatedKey).then(() => {
        this.$refs.message.show({
          type: 'success',
          message: '密钥已复制到剪贴板'
        })
      })
    },
    
    clearKey() {
      if (confirm('确定要清除密钥吗？清除后将无法上传和删除文件。')) {
        clearSecretKey()
        this.$refs.message.show({
          type: 'success',
          message: '密钥已清除'
        })
      }
    },
    
    saveInputKey() {
      if (!this.inputKey) {
        this.$refs.message.show({
          type: 'warning',
          message: '请输入密钥'
        })
        return
      }
      
      // 保存密钥到 localStorage
      saveSecretKey(this.inputKey)
      this.$refs.message.show({
        type: 'success',
        message: '密钥已保存'
      })
      this.showKeyModal = false
      this.inputKey = ''
    },
    
    openUploadModal() {
      // 打开上传模态框时，如果已有密钥则自动填充
      const savedKey = getSecretKey()
      if (savedKey) {
        this.uploadSecretKey = savedKey
      }
      this.showUploadModal = true
    },
    
    closeUploadModal() {
      this.showUploadModal = false
      this.uploadSecretKey = ''
      this.selectedFile = null
      this.isDragging = false
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = ''
      }
    },
    
    triggerFileInput() {
      if (!this.uploading) {
        this.$refs.fileInput.click()
      }
    },
    
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
        this.isDragging = false
      }
    },
    
    handleDrop(event) {
      this.isDragging = false
      
      if (this.uploading) return
      
      const files = event.dataTransfer.files
      if (files.length > 0) {
        this.selectedFile = files[0]
        // 更新 input 的 files
        const dataTransfer = new DataTransfer()
        dataTransfer.items.add(files[0])
        this.$refs.fileInput.files = dataTransfer.files
      }
    },
    
    removeFile() {
      if (!this.uploading) {
        this.selectedFile = null
        this.$refs.fileInput.value = ''
      }
    },
    
    async uploadFile() {
      if (!this.uploadSecretKey) {
        this.$refs.message.show({
          type: 'warning',
          message: '请输入密钥'
        })
        return
      }
      
      if (!this.selectedFile) {
        this.$refs.message.show({
          type: 'warning',
          message: '请选择文件'
        })
        return
      }
      
      this.uploading = true
      
      try {
        const formData = new FormData()
        formData.append('file', this.selectedFile)
        formData.append('type', '2')
        formData.append('secretKey', this.uploadSecretKey)
        
        const response = await uploadFile(formData)
        
        if (response.data.code === '0') {
          // 上传成功后保存密钥
          saveSecretKey(this.uploadSecretKey)
          
          this.$refs.message.show({
            type: 'success',
            message: '文件上传成功'
          })
          
          this.closeUploadModal()
          this.loadFileList()
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '文件上传失败'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '文件上传失败：' + error.message
        })
      } finally {
        this.uploading = false
      }
    },
    
    viewDetail(id) {
      this.$router.push(`/storage/detail/${id}`)
    },
    
    confirmDelete(file) {
      this.fileToDelete = file
      this.showDeleteModal = true
    },
    
    async deleteFile() {
      const secretKey = getSecretKey()
      if (!secretKey) {
        this.$refs.message.show({
          type: 'error',
          message: '密钥已过期，请重新生成'
        })
        return
      }
      
      try {
        const response = await deleteFile(this.fileToDelete.id, secretKey)
        
        if (response.data.code === '0') {
          this.$refs.message.show({
            type: 'success',
            message: '文件删除成功'
          })
          this.showDeleteModal = false
          this.loadFileList()
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '文件删除失败'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '文件删除失败：' + error.message
        })
      }
    }
  }
}
</script>

<style scoped>
.file-storage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 40px 0 80px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-desc {
  font-size: 16px;
  color: var(--text-secondary);
}

.action-section {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.file-list-section {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.list-header h2 {
  font-size: 24px;
  font-weight: 600;
}

.loading-container {
  text-align: center;
  padding: 60px 20px;
}

.loading-container p {
  margin-top: 16px;
  color: var(--text-secondary);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state p {
  color: var(--text-secondary);
}

.file-table-container {
  overflow-x: auto;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  font-size: 20px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

/* 分页组件样式 */
.pagination-wrapper {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.05) 0%, rgba(88, 166, 255, 0.05) 100%);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.pagination-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.total-info {
  font-size: 14px;
  color: var(--text-secondary);
}

.total-info strong {
  color: var(--primary-color);
  font-size: 18px;
  margin: 0 4px;
}

.range-info {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 12px;
  background-color: var(--bg-tertiary);
  border-radius: 12px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.page-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(66, 184, 131, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.page-btn:hover:not(:disabled)::before {
  width: 100px;
  height: 100px;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.2);
}

.page-btn:active:not(:disabled) {
  transform: translateY(0);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--bg-primary);
}

.page-btn.active {
  background: linear-gradient(135deg, #42b883 0%, #35a372 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.3);
  font-weight: 600;
}

.page-btn.ellipsis {
  border: none;
  background: transparent;
  cursor: default;
  color: var(--text-secondary);
}

.page-btn.ellipsis:hover {
  transform: none;
  box-shadow: none;
}

.page-first span,
.page-last span {
  font-size: 18px;
  font-weight: bold;
}

.page-prev span,
.page-next span {
  font-size: 20px;
}

/* 页码跳转 */
.page-jumper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.page-jumper span {
  font-size: 14px;
  color: var(--text-secondary);
}

.page-input {
  width: 60px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
}

.page-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(66, 184, 131, 0.1);
}

.page-input::-webkit-inner-spin-button,
.page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    padding: 16px;
  }
  
  .pagination-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .pagination {
    gap: 4px;
  }
  
  .page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
  }
  
  .page-jumper {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .page-input {
    width: 50px;
    height: 32px;
  }
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.help-text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.key-display {
  margin-top: 20px;
}

.key-value {
  padding: 12px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: monospace;
  word-break: break-all;
  margin: 16px 0;
}

.file-preview {
  padding: 16px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 16px;
}

.file-preview p {
  margin: 8px 0;
}

.upload-progress {
  text-align: center;
  padding: 20px;
}

.upload-progress p {
  margin-top: 12px;
  color: var(--text-secondary);
}

.upload-form .modal-footer {
  margin-top: 24px;
}

.text-warning {
  color: var(--warning-color);
  margin-top: 12px;
}

/* 密钥标签页样式 */
.key-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}

.tab-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.key-section {
  margin-top: 8px;
}

/* 文件上传区域样式 */
.file-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--bg-primary);
  position: relative;
}

.file-upload-area:hover {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.05);
}

.file-upload-area.dragging {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.1);
  transform: scale(1.02);
}

.file-upload-area.has-file {
  border-style: solid;
  padding: 20px;
}

.upload-placeholder {
  pointer-events: none;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.upload-text {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}

.upload-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.file-selected {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
}

.file-icon-preview {
  font-size: 40px;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.file-name-display {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.file-size-display {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.remove-file-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.remove-file-btn:hover:not(:disabled) {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: white;
  transform: rotate(90deg);
}

.remove-file-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 拖拽时的动画 */
.file-upload-area.dragging .upload-icon {
  animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>

